import React, { useEffect, useState } from 'react'
import { Card, Col, PageHeader, Row, List } from 'antd';
import axios from '../../util/http'
import _ from 'lodash'


export default function News() {
  const [list, setList] = useState([])
  useEffect(() => {
    axios.get("http://localhost:5000/news?publishState=2&_expand=category")
      .then(res => {
        console.log(Object.entries(_.groupBy(res.data, item => item.category.title)));
        setList(Object.entries(_.groupBy(res.data, item => item.category.title)))

      })
  }, [])

  return (
    <div style={{ width: "95%", margin: "0 auto" }}>
      <PageHeader
        className="site-page-header"
        title="全球大新闻"
        subTitle="天下事，天下闻"
      />
      <div className="site-card-wrapper">
        <Row gutter={[16, 16]}>


          {
            list.map(item => (
              <Col span={8} key={item[0]}>
                <Card title={item[0]} bordered={true} hoverable>
                  <List
                    size="small"
                    dataSource={item[1]}
                    renderItem={data => {
                      console.log(data);
                      return <List.Item>
                        <a href={`#/detail/${data.id}`}>{data.title}</a>
                      </List.Item>
                    }}
                  />
                </Card>
              </Col>

            ))
          }


        </Row>
      </div>
    </div>
  )
}
